<template>
  <div>
    <ContentTitle :info="ctInfo" />

    <!-- 搜索关键词 -->
    <Search @handerAdd="HanderAdd" @search="search" :total="totalSize" />

    <!-- 表格 -->
    <Table :list="list" @reName="reName" @del="del" />

    <!-- 分页按钮 -->
    <!-- <Paging
      :pageSize="pageSize"
      :totalSize="totalSize"
      :currPage.sync="currPage"
      @jump="jump"
    /> -->
    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="pageSize"
      :total="totalSize"
      :current-page.sync="currPage"
      @current-change="jump"
    >
    </el-pagination>

    <!-- 新增群组弹窗 -->
    <Dialog
      :dialogVisible.sync="dialogVisible"
      :form.sync="form"
      @addEdit="addEdit"
      :editing="editing"
    />
  </div>
</template>

<script>
import ContentTitle from "@/components/ContentTitle.vue";
import Table from "./groups/Table.vue";
import Dialog from "./groups/Dialog.vue";
import Search from "./groups/Search.vue";

import { $groupList, $groupAdd, $groupEdit, $groupDel } from "@/api/index.js";
export default {
  components: {
    ContentTitle,
    Table,
    Dialog,
    Search,
  },
  data() {
    return {
      // 头部显示信息
      ctInfo: {
        type: "设备",
        text: "节点群组",
        msg: "以分组的形式管理节点设备，提供了搜索、添加新的群组、重命名、移动设备等功能。",
      },
      // 群组列表
      list: [],
      // 页号\条数\总条数
      currPage: 1,
      pageSize: 5, //默认五条
      totalSize: 5,
      // 搜索关键词
      keyword: "",
      // 显示隐藏新增群组的弹窗
      dialogVisible: false,
      form: {
        name: "",
      },
      index: 0, // 当前选择索引
      editing: false, //默认新增
      keyword: "", //搜索关键词
    };
  },
  created() {
    this.getList();
  },
  computed: {
    // 根据总条数和每页条数,计算总页数
    totalPage() {
      return Math.ceil(this.totalSize / this.pageSize); //向上取整
    },
  },
  methods: {
    // 获取列表

    getList() {
      let obj = {
        currPage: this.currPage,
        pageSize: this.pageSize,
        keyword: this.keyword,
      };
      $groupList(obj)
        .then((res) => {
          console.log(res);
          this.totalSize = res.total; //修改总条数,计算属性计算总页数
          this.list = res.data;
        })
        .catch((err) => console.log("获取列表失败", err));
    },
    // 翻页
    jump() {
      // 因为是页号改变的回调函数，页号已经变化，直接调用即可
      console.log(this.currPage);
      this.getList();
    },
    // 搜索，获取表单数据
    search(value) {
      this.keyword = value;
      // 默认第一页开始
      this.currPage = 1;
      this.getList();
      this.$message({
        message: "搜索成功",
        type: "success",
        duration: "1000",
        center: true,
      });
    },
    // 新增群组，跳出弹窗
    HanderAdd() {
      this.form.name = "";
      this.dialogVisible = true;
      this.editing = false;
    },
    // 新增群组或编辑名字
    addEdit() {
      if (this.editing) {
        //编辑
        let obj = {
          id: this.list[this.index].id,
          groupName: this.form.name,
        };
        $groupEdit(obj)
          .then((res) => {
            console.log(res);
            let obj2 = {
              ...this.list[this.index],
              ...res.data,
            };
            this.list.splice(this.index, 1, obj2);
            this.$message({
              message: "重命名成功",
              type: "success",
              duration: "1000",
              center: true,
            });
          })
          .catch((err) => {
            console.log("编辑失败", err);
            this.$message({
              message: "重命名失败",
              type: "error",
              duration: "1000",
              center: true,
            });
          });
      } else {
        //新增
        $groupAdd({ groupName: this.form.name })
          .then((res) => {
            // console.log(res);
            if (this.currPage === this.totalPage) {
              if (this.totalSize % this.pageSize) {
                // 不会被整除，说明那一页没有满,说明可以在最后一页添加
                this.list.push(res.data);
              }
            }
            // 无论是不是最后一页，都要添加条数
            this.totalSize++;
            this.$message({
              message: "添加成功",
              type: "success",
              duration: "1000",
              center: true,
            });
          })
          .catch((err) => console.log(err));
      }
    },
    // 编辑
    reName(index, row) {
      // console.log(index, row);
      this.form.name = row.groupName;
      this.dialogVisible = true;
      this.index = index;
      this.editing = true;
    },
    // 删除
    del(index) {
      // console.log(index);
      this.$confirm("确认删除？")
        .then(() => {
          // console.log(index);
          $groupDel({ id: this.list[index].id })
            .then((res) => {
              // console.log("删除");
              if (this.currPage === this.totalPage) {
                // 如果是最后一页
                console.log(this.totalSize % this.pageSize);
                if (this.totalSize % this.pageSize === 1) {
                  // 如果只剩一条
                  this.currPage--;
                }
              }

              this.getList();
            })
            .catch((err) => {
              console.log("删除失败", err);
            });
        })
        .catch(() => {
          console.log("取消删除");
        });
    },
  },
};
</script>

<style scoped>
</style>